<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-06-15 10:45:58
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 10:29:51
-->
<template>
  <div>
    <el-card shadow="never" class="oper-btn-card">
      <el-input
        v-model="searchData.keywords"
        clearable
        style="width: 300px"
        placeholder="按客户编号，名称，联系人，电话查询"
      />
      <el-button type="primary" :loading="btnLoading.search" @click="btnSearch">
        搜索
      </el-button>
    </el-card>
    <div class="margin-t2">
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="clearfix">
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageInfo.rows"
          :page-sizes="[20,30,40]"
          :current-page.sync="pageInfo.page"
          :total="pageInfo.total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listDeptRece as listData } from '@/api/setup/origin.js'

export default {
  components: { },
  mixins: [oftenuse],
  data() {
    return {
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'code', title: '客户编号', width: 140 },
        { field: 'name', title: '客户名称', width: 150, showOverflow: true },
        { field: 'deptOrigin', title: '期初应收欠款', align: 'right', width: 140 },
        { field: 'companyTel', title: '单位电话', width: 140 },
        { field: 'contacter', title: '联系人', width: 140 },
        { field: 'phone', title: '联系电话', width: 140 }
      ]
    }
  },
  created() {
    this.listData()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listData().then(_ => {
        this.setBtnLoading('search', false)
      })
    },
    listData(params = { page: this.pageInfo, data: this.searchData }) {
      this.setTableLoading('table', true)
      return listData(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records)
        this.pageInfo.total = total
      })
    },
    onSizeChange() {
      this.listData()
    },
    onCurrentChange() {
      this.listData()
    }
  }
}
</script>

<style>

</style>
